<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@include file="./common/tag.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0"/>

    <!--<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/dist/css/AdminLTE.min.css">-->
    <link rel="stylesheet" href="//g.alicdn.com/sui/sui3/0.0.18/css/sui.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./style/common.css">
    <link rel="stylesheet" href="./style/style.css">
    <link rel="stylesheet" href="./style/custom-theme.css">
    <link rel="stylesheet" href="./style/slider.css">

    <title>后台管理系统</title>
</head>
<body>
<header class="main-header">
    <a href="#" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>A</b>LT</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>后</b>台管理</span>
    </a>
    <nav class="navbar  navbar-inverse navbar-static-top">

        <ul class="nav navbar-nav navbar-right" style="float: right">
            <li class="dropdown" style="float: left;">
                <a href="#" style="padding: 16px 20px;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">管理员 <span
                        class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">简介</a></li>
                    <li class="divider"></li>
                    <li><a href="#">退出</a></li>
                </ul>
            </li>
            <li><a href="#"></a></li>
        </ul>
    </nav>
</header>

<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar" style="height: auto;">
        <!-- Sidebar user panel -->
        <!-- /.search form -->
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
            <li class="header">菜单</li>

            <li class="treeview">
                <a href="#">
                    <i class="fa fa-user"></i> <span>用户管理</span>
                    <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> 用户管理</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> 添加用户</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-product-hunt"></i> <span>商品管理</span>
                    <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> 商品管理</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> 添加商品</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-dashboard"></i> <span>订单管理</span>
                    <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> 订单列表</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> 订单统计</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-dashboard"></i> <span>仓库管理</span>
                    <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> 仓库管理</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> 添加仓库</a></li>
                </ul>
            </li>
        </ul>
    </section>
    <!-- /.sidebar -->
</aside>
<div class="content-wrapper" style="min-height: 901px;">
    <section class="content-header">
        <h1>
            用户管理
            <small></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">用户管理</a></li>
            <li class="active">用户列表</li>
        </ol>
    </section>
    <div class="content">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default"
                            data-toggle="modal" data-target=".add-user-modal-lg"
                    >增加
                    </button>
                </div>
                <div class="modal fade add-user-modal-lg" tabindex="-1" role="dialog"
                     aria-labelledby="myLargeModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h5 class="modal-title" id="myModalLabel">增加用户</h5>
                            </div>
                            <div class="modal-body">
                                <form class='form-horizontal' data-toggle='validate' id="user-form">
                                    <div class="form-group">
                                        <label for="validate-name" class="col-sm-2 control-label">姓名</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="validate-name"
                                                   placeholder="姓名" data-rule-minlength="2"
                                                   data-rule-required='true'
                                                   name='name'>
                                        </div>
                                        <div class="col-sm-4 error-container"></div>
                                    </div>
                                    <div class="form-group">
                                        <label for="validate-username" class="col-sm-2 control-label">用户名</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="validate-username"
                                                   placeholder="用户名" data-rule-minlength="2"
                                                   data-rule-required='true'
                                                   name='username'>
                                        </div>
                                        <div class="col-sm-4 error-container"></div>
                                    </div>
                                    <div class="form-group">
                                        <label for="validate-password"
                                               class="col-sm-2 control-label">密码</label>
                                        <div class="col-sm-6">
                                            <input type="password" class="form-control"
                                                   name="password"
                                                   id="validate-password"
                                                   placeholder="密码" data-rule-required='true'
                                                   data-rule-minlength="6" data-rule-maxlength='12'>
                                        </div>
                                        <div class="col-sm-4 error-container"></div>
                                    </div>
                                    <div class="form-group">
                                        <label
                                                class="col-sm-2 control-label">性别</label>
                                        <div class="col-sm-6">
                                            <label class="radio-inline">
                                                <input type="radio" name="gender" id="inlineRadio1" value="1"> 男
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="gender" id="inlineRadio2" value="0"> 女
                                            </label>
                                        </div>
                                        <div class="col-sm-4 error-container"></div>
                                    </div>
                                    <div class="form-group">
                                        <label for="validate-phone"
                                               class="col-sm-2 control-label">手机号</label>
                                        <div class="col-sm-6">
                                            <input type="number" class="form-control"
                                                   name="password"
                                                   id="validate-phone"
                                                   placeholder="手机号" data-rule-required='true'
                                                   data-rule-length="11">
                                        </div>
                                        <div class="col-sm-4 error-container"></div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button id="submit"
                                                    type="submit"
                                                    data-loading-text="提交处理中..."
                                                    class="btn btn-primary"
                                                    autocomplete="off"
                                            >保存
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>
                                用户名
                                <i data-sort="username" class="pull-right fa fa-sort"></i>
                            </th>
                            <th>
                                姓名
                                <i data-sort="name" class="pull-right fa fa-sort"></i>
                            </th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default interactive"
                                            data-toggle="modal" data-target=".add-user-modal-lg opt-update">修改
                                    </button>
                                    <button type="button" class="btn btn-xs danger btn-danger opt-delete">删除</button>
                                    <button type="button" class="btn btn-xs btn-default opt-detail">详情</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default interactive"
                                            data-toggle="modal" data-target=".add-user-modal-lg"
                                    >修改
                                    </button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td scope="row">1
                            </td>
                            <td>bytesu</td>
                            <td>苏伟明</td>
                            <td>15029351330</td>
                            <td class="text-right">
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-xs danger btn-default">修改</button>
                                    <button type="button" class="btn btn-xs danger btn-danger">删除</button>
                                    <button type="button" class="btn btn-xs btn-default">详情</button>

                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="su-pager text-right">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="//g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="//g.alicdn.com/sui/sui3/0.0.18/js/sui.min.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript" src="./script/users.js"></script>

</html>